<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-shoppingProduct-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">商品名称：</label>
            <div class="col-sm-8">
                <input id="productName" name="productName" class="form-control" type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">商品图片：</label>
            <div class="col-sm-8">
                <input type="file" id="picture1" name="fileImg"  accept="image/*"/>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-8" id="imgBox">
            </div>
        </div>




        <div class="form-group">
            <label class="col-sm-3 control-label">价格：</label>
            <div class="col-sm-8">
                <input id="price" name="price" class="form-control" type="number">
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-3 control-label">启用状态：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('sys_product_status')}">
                    <input type="radio" th:id="${dict.dictCode}" name="stutas" id="stutas" th:value="${dict.dictValue}"
                           th:checked="${dict.isDefault == 'Y' ? true : false}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">是否线上商品：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('acq_binding_type')}">
                    <input type="radio" th:id="${dict.dictCode}" name="type" id="type" th:value="${dict.dictValue}" th:checked="${dict.isDefault == 'Y' ? true : false}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">显示积分：</label>
            <div class="col-sm-8">
                <input id="showScore" name="showScore" class="form-control" type="number">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品描述：</label>
            <div class="col-sm-8">
                <script id="editor"name="remarks"  type="text/plain" style="width:1024px;height:500px;"></script>
                </div>
                </div>

    </form>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/select/select2.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');

    var prefix = ctx + "system/shoppingProduct"
    $("#form-shoppingProduct-add").validate({
        rules:{
            productName:{
            	required:true,
            },

            price:{
            	required:true,
            },
            stutas:{
            	required:true,
            },

        }
    });

    function submitHandler() {
        if ($.validate.form()) {
            var formdata = new FormData();
            var arr = [];
            arr.push(UE.getEditor('editor').getContent());
            formdata.append("productName", $("#productName").val());
            formdata.append("price", $("#price").val());
            formdata.append("freight", $("#freight").val());
            formdata.append("showScore", $("#showScore").val());
            formdata.append("remarks", arr.join("\n"));
            formdata.append("type",$("input[name='type']:checked").val());
            formdata.append("stutas",$("input[name='stutas']:checked").val());
            for(var i=0;i<imgFile.length;i++){
                formdata.append('fileImg',imgFile[i]);
            }
            $.ajax({
                url: prefix + "/add",
                data: formdata,
                type: "post",
                timeout : 20000, //超时时间设置，单位毫秒
                processData: false,
                contentType: false,
                success: function(result) {
                    $.operate.saveSuccess(result);
                },
                complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
                    if(status=='timeout'){//超时,status还有success,error等值的情况

                        $.modal.alertError("请求已超时，请稍后再试！");
                        $.modal.close();
                    }
                }
            })


        }
    }

    //图片预览路径

    function getObjectURL(file) {
        var url = null;
        if(window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if(window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if(window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;

    }


    var imgSrc = []; //图片路径
    var imgFile = []; //文件流
    var imgName = []; //图片名字
    //选择图片
    $("#picture1").on("change", function() {
        var imgBox = '#imgBox'
        var fileImg = $("#picture1")[0];
        var fileList = fileImg.files;
        for(var i = 0; i < fileList.length; i++) {
            var imgSrcI = getObjectURL(fileList[i]);
            imgName.push(fileList[i].name);
            imgSrc.push(imgSrcI);
            imgFile.push(fileList[i]);
        }
        addNewContent(imgBox);
    })


    //图片展示
    function addNewContent(obj) {
        $("#imgBox").html("");
        for(var a = 0; a < imgSrc.length; a++) {
            var oldBox = $("#imgBox").html();
            $("#imgBox").html(oldBox + '<div class="imgContainer"><img  width="100" height="100" title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' onclick="imgDisplay(this)"><p onclick="removeImg(this,' + a + ')" class="imgDelete"><a>删除</a></p></div>');
        }
    }
    //删除
    function removeImg(obj, index) {
        imgSrc.splice(index, 1);
        imgFile.splice(index, 1);
        imgName.splice(index, 1);
        var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
        addNewContent(boxId);
    }

    //图片灯箱
    function imgDisplay(obj) {
        var src = $(obj).attr("src");
        var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src=' + src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" onclick="closePicture(this)">×</p></div>'
        $('body').append(imgHtml);
    }
    //关闭
    function closePicture(obj) {
        $(obj).parent("div").remove();
    }
    //图片预览路径
    function getObjectURL(file) {
        var url = null;
        if(window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if(window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if(window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

</script>
</body>
</html>
